<template>
  <div id="category" ref="category">
    <nav-bar class="category-bar"><div slot="center">商品分类</div></nav-bar>
    <div class="content">
      <tab-menu :categories="categories" @selectItem="selectItem"/>
      <scroll id="tab-content">
        <category-tab-content :subcategories="showSubcategory" />
        <tab-control :titles="['综合', '新品', '销量']"
          @itemClick="tabClick" />
          <tab-content-detail :category-detail="showCategoryDetail" />
      </scroll>
    </div>
  </div>
</template>
<script>
import NavBar from 'components/common/navBar/NavBar'
import Scroll from 'components/common/scroll/Scroll'
import TabControl from 'components/content/tabControl/TabControl'

import TabMenu from './childComps/TabMenu'
import CategoryTabContent from './childComps/CategoryTabContent'
import TabContentDetail from './childComps/TabContentDetail'

import {getCategory, getSubCategory, getCategoryDetail} from 'network/category'
// import {POP, SELL, NEW} from "common/const";
import {tabControlMixin} from 'common/mixin'

export default {
  name: 'Category',
  components: {
    NavBar,
    TabControl,
    Scroll,
    TabMenu,
    CategoryTabContent,
    TabContentDetail
  },
  data(){
    return{
      categories: [],
      categoryData: {
      },
      currentIndex: -1
    }
  },
  mixins: [tabControlMixin],
  created(){

  },
  computed: {
    showSubcategory() {
      if (this.currentIndex === -1) return {}
      return this.categoryData[this.currentIndex].subcategories
    },
    showCategoryDetail() {
      if (this.currentIndex === -1) return []
      return this.categoryData[this.currentIndex].categoryDetail[this.currentType]
    }
  },
  mounted(){
    this.getCategory()
  },
  methods: {
    getCategory(){
      getCategory().then(res => {
        console.log(res)
        //1.获取分类数据
        this.categories = res.data.category.list
        console.log(this.categories)
        //2.初始化每个类别的子数据
        for(let i = 0; i < this.categories.length; i++){
          this.categoryData[i] = {
            subcategories: {},
            categoryDetail: {
              'pop': [],
              'new': [],
              'sell': []
            }
          }
        }
        //3.请求第一个分类的数据
        this.getSubCategory(0)
      })
    },
    getSubCategory(index){
      this.currentIndex = index
      const maitKey = this.categories[index].maitKey
      getSubCategory(maitKey).then(res => {
        this.categoryData[index].subcategories = res.data
        this.categoryData = {...this.categoryData}
        console.log(this.categoryData)
        this.getCategoryDetail('pop')
        this.getCategoryDetail('sell')
        this.getCategoryDetail('new')
      })
    },
    getCategoryDetail(type){
      //1.获取请求的miniWallkey
      const miniWallkey =this.categories[this.currentIndex].miniWallkey
      //2.发送请求，传入miniWallkey和type
      getCategoryDetail(miniWallkey, type).then(res => {
        console.log(res)
        //3.将获取的数据保存下来
        this.categoryData[this.currentIndex].categoryDetail[type] = res
        console.log(this.categoryData[this.currentIndex].categoryDetail[type])
        this.categoryData = {...this.categoryData}
        console.log(this.categoryData)
      })
    },

    selectItem(index){
      this.getSubCategory(index)
    }

  }
}
</script>
<style scoped>
 #category {
   height: 300px;
   /* overflow-y: hidden; */
 }
 .category-bar{
  background-color: var(--color-tint);
  color: #fff;
  position: relative;
  z-index: 999;
 }
.content {
  position: absolute;
  left: 0;
  right: 0;
  top: 44px;
  bottom: 49px;

  display: flex;
}

#tab-content {
  height: 100%;
  flex: 1;
}
</style>
